<template>
  <div>
    <div class="content">
      <div class="content-top">
        <div class="content-left"><span>{{getdata.title}}</span></div>
        <div class="content-right">更多>></div>
      </div>
      <swiper ref="mySwiper" :options="swiperOptions" class="dalunbo">
    <swiper-slide class="lunbo" v-for="(item,index) in getdata.img" :key="index">
      <img  :src="item" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    </div>  
  </div>
</template>

<script>
export default {
   data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination',
          },
           slidesPerView :'auto'
        }
      }
    },
    props:{
      getdata:{
        type:Object,
        default:function(){
          return {}
        }
      }
    }
}
</script>

<style scoped lang="less">
.content{
  background-color: #fff;
  width: 100%;
  height: 3rem;
  margin-bottom: 0.8rem;
  .content-top{
    width: 100%;
    height: 0.5rem;
    border-top:0.2rem solid #e5e5e5;
    .content-left{
      width: 2.5rem;
      height: 0.5rem;
      float: left;
      span{
        position: relative;
        top:0.2rem;
        left:0.2rem;
        border-left:0.08rem solid #7ACF9B
      }
    }
    .content-right{
      width: 0.8rem;
      height: 0.5rem;
      float: right;
      position: relative;
      top:0.2rem;
      right:0.2rem;
    }
  }
}
.dalunbo{
  height: 3rem;
}
.lunbo{
  width:  3rem;
  height: 3rem;
  margin-right: 0.1rem;
  img{
    width: 3rem;
    height: 100%;
    margin: 0.2rem;
  }
}
</style>